<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝选女友</title>
<style>
* { margin:0; padding:0}
ul,ol { list-style:none}
h3 { height:40px }
button:disabled { cursor: not-allowed; }
.shopping { width:570px; margin:100px auto; padding:20px; border:1px solid #ccc; position:relative; overflow: hidden; }
.shopping .left { float: left; }
.shopping .right { float: right; }
.shopping .girlImg { position: relative; width:200px; height: 200px;cursor: move}
.shopping .girlImg img { width:100%; height: 100%}
.shopping .girlImg span { display: none; width: 100px; height: 100px; position: absolute; background: rgba(255, 255, 0, 0.3);left: 0;top: 0;}
.imgList { width:220px; margin-top: 20px; }
.imgList li { float:left; margin-right:8px; border:2px solid transparent}
.imgList .ac { border:2px solid red}
.imgList li img{ width:40px; display:block}
.price { height:50px; font-size:30px; color:red; font-weight:bold}
.priceList { overflow:hidden; margin:20px 0}
.priceList li { float:left; height:30px; line-height:30px; padding:0 10px; border:2px solid #999; margin-right:10px; cursor:pointer}
.priceList .ac { border:2px solid red}
.changeNum { position:relative; margin:20px 0}
.changeNum input { width:40px; height:41px; text-align:center; line-height:40px;border:1px solid #ccc;}
.changeNum button {height:22px; width:20px; background:none; border:1px solid #ccc; position:absolute;}
.changeNum .addBtn { left:41px; top:0px;}
.changeNum .subBtn { left:41px; top:21px;}
.okBtn { height:30px; width:100px}
.bigBox { position: absolute; width: 200px; height: 200px; left: 230px; display: none; overflow: hidden; }
.bigBox img { position: absolute;}

.shopCart { position: fixed;right: 0;top: 200px;color: red;}  
.shopNum { width: 60px; height: 25px; background: deeppink; color:black; text-align: center; line-height: 25px;}
.active { width: 25px; height: 25px; background: skyblue; position: absolute;}
</style>
</head>

<body>
<div class="shopping" id="shopping">
  <div class="left">
    <div class="girlImg" id="box">
      <img id="girl" src="4.jpeg">
      <span></span>
    </div>
    <ol id="imgList" class="imgList">
      <li><img src="0.jpg"></li>
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>
    </ol>
  </div>
  <div class="right">
    <h3>淘宝选女友---不要998,女友带回家!!</h3>
    <div id="price" class="price"><em>480-99988</em> 元</div>
    <ul id="priceList" class="priceList">
      <li>标准版</li>
      <li>升级版</li>
      <li>豪华版</li>
      <li>定制版</li>
    </ul>
    <div id="changeNum" class="changeNum">
        <input type="text" value="1">
        <button class="addBtn" type="button">+</button>
        <button class="subBtn" type="button" disabled>-</button>
    </div>
    <button id="okBtn" class="okBtn" type="button" disabled>加入购物车</button>
  </div>
  <div id="bigBox" class="bigBox"><img src="4.jpeg" alt=""></div>
</div>
<div id="shopCart" class="shopCart">  
    购物车  
  <p id="shopNum" class="shopNum">0</p>
</div>
</body>
</html>
